<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
    <bm-marker :position="currentPosition" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
    </bm-marker>
    <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"
                 :editing="false" @lineupdate="updatePolylinePath">
    </bm-polyline>
  </baidu-map>
</template>

<script setup>
import {ref, onMounted} from 'vue';
const center = ref({lng: 0, lat: 0});
const zoom = ref(3);
const currentPosition = ref({lng: 109.837, lat: 40.626})
//如下为固定的多边形区域，需要从后端获取数据更新地图轨迹
const polylinePath = ref([
  {lng: 109.8315, lat: 40.6296},
  {lng: 109.8501, lat: 40.6285},
  {lng: 109.8497, lat: 40.6236},
  {lng: 109.8311, lat: 40.6247},
  {lng: 109.8315, lat: 40.6296}
])

const handler = ({BMap, map}) => {
  //console.log(BMap, map);
  center.value.lng = 109.836;
  center.value.lat = 40.622;
  zoom.value = 15;
}

</script>

<style scoped>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 100%;
  height: 100%;
}
</style>